<template>
  <div ref="mainRef" id="eBox" style="width:100%;height:100%"></div>
</template>

<script setup lang="ts">
import { ref,defineProps,onMounted,onUnmounted } from "vue";
import * as echarts from 'echarts'

// 获取echarts图表的容器
let mainRef = ref(null)

// 接受父组件传递过来的数据
const props = defineProps(['echartOption'])
console.log(props,'props')
let myEchart:echarts.ECharts | null = null
// 初始化图表
onMounted(()=>{
  // 获取容器 + 主题 + 渲染模式(canvas svg)
  myEchart = echarts.init(mainRef.value,'dark',{renderer:'svg'})
  // 需要给图表设置参数
  myEchart.setOption(props.echartOption)
})

// 销毁图表,释放资源
onUnmounted(()=>{
  myEchart?.dispose()
})


</script>

<style scoped></style>